import { selfBuiltList } from "@/services/aigcUser";
import { configurationBaseDetail,configurationBaseEdit } from "@/services/workOrder";
import { Button, Form,message,Select,Switch } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class WorkOrderSetting extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      userList:[],
      id:""
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
    
  }

  getInfo = async () => {
    const res = await configurationBaseDetail({applicationId:this.props.applicationId})
    this.props.form.setFieldsValue({
      headerIds:res.headerIds,
      type:res.type == 2,
      moduleTicket:res.type != 0
    })
    if(res.type == 2){
      this.props.form.setFieldsValue({relUserIds:res.relUserIds})
    }
    
    this.setState({id:res.id})
    
    this.getUserList()
  }

  getUserList = async () => {
    const res = await selfBuiltList({current:1,size:999999,categoryId:"",name:""})
    this.setState({userList:res.records})
  }

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        this.doOk(values)
      }
    })
  }

  doOk = async values => {
    const res = await configurationBaseEdit({
      ...values,
      applicationId:this.props.applicationId,
      type: values.moduleTicket ? values.type ? 2 : 3 : 0,
      id:this.state.id
    })
    message.info(res.message)
  }

  render(){
    const { userList } = this.state;
    const { form:{getFieldDecorator,getFieldValue} } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
    };
    return(
      <div>
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: 'workOrderSetting.form.enableWorkOrder' })}>
            {getFieldDecorator("moduleTicket",{
              valuePropName: 'checked',
            })(
              <Switch />
            )}
          </Form.Item> 
          <Form.Item label={formatMessage({ id: 'workOrderSetting.form.responsiblePerson' })}>
            {getFieldDecorator("headerIds",{rules:[{required:true,message:formatMessage({ id: 'workOrderSetting.validate.select' })}]})(
              <Select mode="multiple" placeholder={formatMessage({ id: 'workOrderSetting.select.placeholder' })}>
                {
                  userList.map(item => (
                    <Select.Option value={item.id}>{item.name || item.userName}</Select.Option>
                  ))
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'workOrderSetting.form.assignEngineer' })}>
            {getFieldDecorator("type",{ valuePropName: 'checked' })(
              <Switch />
            )}
            <div>{formatMessage({ id: 'workOrderSetting.form.assignEngineerDesc' })}</div>
          </Form.Item>
          {
            getFieldValue('type') ? (
              <Form.Item label={formatMessage({ id: 'workOrderSetting.form.selectEngineer' })}>
                {getFieldDecorator("relUserIds",{rules:[{required:true,message:formatMessage({ id: 'workOrderSetting.validate.select' })}]})(
                  <Select mode="multiple" placeholder={formatMessage({ id: 'workOrderSetting.select.placeholder2' })}>
                    {
                      userList.map(item => (
                        <Select.Option value={item.id}>{item.name || item.userName}</Select.Option>
                      ))
                    }
                  </Select>
                )}
              </Form.Item>
            ) : ''
          }
          

          <Form.Item label=" " colon={false}>
            <Button type="primary" onClick={this.validateForm}>{formatMessage({ id: 'workOrderSetting.button.save' })}</Button>
          </Form.Item>
          
        </Form>
      </div>
    )
  }
}

export default Form.create()(WorkOrderSetting)